// 此文件是用来实现页面登录的权限控制

import router, { asyncRoutes } from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from '@/utils/get-page-title'

router.beforeEach(async(to, from, next) => {
  NProgress.start()// 开启进度条

  console.log(to, '去哪个页面')
  console.log(from, '从哪个页面来页面')
  // 通过是否有token，判断是否登录()
  // 动态设置网页标题
  document.title = getPageTitle(to.meta.title)
  // document.title = `人力资源管理系统-${to.meta.title}`
  const token = store.state.user.token
  const whiteList = ['/login', '/404'] // no redirect whitelist

  if (token) { // 登录的情况下（用户要去的页面登录页（跳转到首页）、其他页（放行））
  // 已有token,不能再去登录页，直接跳转到首页
    if (to.path === '/login') {
      next('/')
      // 如果next('/')指定了跳转页面，那么他就不会经过router.afterEach
      NProgress.done()// 结束进度条
      // 如果next（）,直接放行，那么才会经过router.afterEach
    } else {
      // 已有token,要去其他页，直接放行
      // 触发actions中的函数，发送请求获取用户信息(y判断信息是否获取到，如果没有在数据中获取id，则表示数据还未获取，如果有id则无需再次获取)
      // 代码优化

      if (!store.state.user.userInfo.userId) {
        const menus = await store.dispatch('user/getUserInfo')
        console.log(menus, 'menus')
        // 使用权限信息筛选出用户可以访问的动态路由
        const filterRoutes = asyncRoutes.filter(route => {
          return menus.includes(route.children[0].name)
        })
        console.log(filterRoutes, 'filterRoutes')
        // 根据权限信息，添加动态路由，渲染左侧菜单
        // 动态添加用户可以访问的路由
        // 解决动态路由页面切换的问题
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(filterRoutes)
        // 将动态路由存储到vuex
        store.commit('menus/setMenus', filterRoutes)
        next({ ...to, replace: true })
      } else {
        // 如果有动态路由则无需经过（next({ ...to, replace: true })解决刷新白屏问题）
        // replace:用于保证动态路由添加完成，采访问对应页面
        next()
      }
    }
  } else { // 未登录的情况下（用户要去的页面登录页（放行）、其他页（不放行，强制跳转到登录页））（白名单==登录页）
    // whiteList.includes(to.path) 如果要去的路径在白名单中，includes,返回TRUE，若不在，则返回FALSE，执行else语句
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()// 结束进度条
    }
  }
})
// 页面跳转完成会经过这个钩子函数
router.afterEach(() => {
  NProgress.done()// 结束进度条
  console.log('结束进度条，页面跳转完成')
  NProgress.done()// 结束进度条
})
